<template>
  <el-drawer
    :visible.sync="showDrawer"
    :title="$t('receive')"
    size="35%"
    @close="$emit('close')"
    class="settle-drawer"
  >
    <el-alert
      class="tips"
      :title="
        $t('walletTips', { coin_name: coin_name, chain_alias: chain_alias })
      "
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <div class="qr-box">
      <p>{{ $t("qrTip1", { coin_name: coin_name }) }}</p>
      <div class="qr-img">
        <div ref="cbcCode" id="cbcCode"></div>
      </div>
      <p>{{ $t("receiveAddress") }}</p>
      <span>{{ address }}</span>
    </div>
    <div class="copyBtn">
      <span class="textBtn" @click="copy(address)">{{
        $t("CopyAddress")
      }}</span>
    </div>
    <div
      :fullscreen="true"
      v-loading.lock="loading"
      class="loading-content"
      v-if="loading"
    ></div>
  </el-drawer>
</template>
<script>
// import { getWalletBillDetailNewApi } from "@/api/wallet/index";
// import { dayjs } from "element-ui";
import QRCode from "qrcodejs2";
import { httpWalletAddress } from "@/http/api";
import { copyText } from "@/utils/common";
export default {
  name: "walletDetail",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      showDrawer: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      ruleForm: {
        currency: "",
        amount: "",
        address: "",
      },
      rules: {
        currency: [
          {
            required: true,
            message: this.$t("currencyTips"),
            trigger: "change",
          },
        ],
        amount: [
          { required: true, message: this.$t("countTips"), trigger: "change" },
        ],
        address: [
          {
            required: true,
            message: this.$t("addressTips"),
            trigger: "change",
          },
        ],
      },
      address: "",
      coin_name: "",
      chain_alias: "",
    };
  },
  methods: {
    copy(text) {
      copyText(text);
      this.$message.success(this.$t("copySuccess"));
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    selectGame() {},
    async getAddress() {
      this.loading = true;
      let res = await httpWalletAddress();
      const { address, coin_name, chain_alias } = res.data;
      this.address = address;
      this.coin_name = coin_name;
      this.chain_alias = chain_alias;
      this.$nextTick(() => {
        let existingQR = document.getElementById("cbcCode");
        if (existingQR) {
          existingQR.innerHTML = "";
        }
        new QRCode(this.$refs.cbcCode, {
          text: address,
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
      this.loading = false;
    },
  },
  created() {
    // this.getAddress();
  },
  watch: {
    show(val) {
      this.showDrawer = val;
      if (val) {
        this.getAddress();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.tips {
  background-color: #513216;
  color: #fff;
}
.qr-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  position: relative;
  .qr-img {
    width: 200px;
    height: 200px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    margin-bottom: 10px;
    color: #7d7d7d;
  }
}
.copyBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  width: 100%;
  margin-top: 25px;
  .textBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #513216;
    border-radius: 5px;
    font-size: 18px;
    color: #fff;
    margin-left: 5px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
